<template>
  <div class="tophead">
		<div class="th-l" @click="backgo"><i class="icon iconfont icon-back"></i> </div>
		<div class="th-title">{{title}}</div>
		<div class="th-r">
			<slot name="rg">右侧插槽</slot>
		</div>
  </div>
</template>

<script>
export default {
  name: 'tophead',
	props: {
		title: {
			type: String,
			default:	""
		},
		backurl:{
			type:String,
			default:	""
		}
	},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
	methods: {
		backgo() {
			if(this.backurl){
				this.$router.push(this.backurl)
			}else{
				this.$router.go(-1)
			}
		}
	},
}
</script>

<style lang="scss" scoped>
		.tophead{
			@include fp();
			height: $th;
			line-height:$th;
			color: #fff;
			font-size: $text-size-imp;
			background-color:$act-color;
			.th-l{
				padding-left:px2rem(25);
			}
			.th-title{
				text-align: center;
				flex: 1 1 auto;
			}
			.th-r{
				padding-right:px2rem(25);
			}
			.icon:before{
				font-size: $text-size-imp;
			}
		}
</style>
